<template>
  <DetailPanner>
    <template #left>
      <span class="title">
        {{ text.h }}
      </span>
    </template>
    <template #right>
      <div class="mode noDrag">
        <div v-for="item in 3">
        </div>
        <span></span>
      </div>
    </template>
    <template #main>
      <div class="applyMain">
        <template v-if="(params === '-1' || params === '-2')">
          <p class="noSelect" v-if="(applyData.length == 0)">{{ text.k }}</p>
          <ul class="applyList noDrag" v-else>
            <ApplyMsg v-for="row in applyData" :row="row" :params="params" style="margin-bottom: 8px;" />
          </ul>
        </template>

        <template v-if="params?.groupId">
          <GroupDetail :groupId="params.groupId">
            <p class="noSelect">{{ text.k }}</p>
          </GroupDetail>
        </template>
        <template v-if="params?.userId">
          <FriendDetail :userId="params.userId">
            <p class="noSelect">{{ text.k }}</p>
          </FriendDetail>
        </template>
      </div>
    </template>
  </DetailPanner>
</template>
<script >
import DetailPanner from '@/components/DetailPanner.vue';
import { defineComponent, computed, watch, } from 'vue';
import ApplyMsg from './ApplyMsg'
import GroupDetail from './GroupDetail'
import FriendDetail from './FriendDetail'
import { useStore } from 'vuex';
export default defineComponent({
  components: {
    DetailPanner,
    ApplyMsg,
    GroupDetail,
    FriendDetail
  },
  props: {
    params: {
      default: () => "default"
    },
  },
  setup (props) {
    const store = useStore()

    const text = computed(() => {
      const types = {
        "default": {
          h: "",
          k: "欢迎使用Mechat"
        },
        '-2': {
          h: "朋友申请",
          k: "暂无好友申请通知"
        },
        "-1": {
          h: "群申请",
          k: "暂无群申请通知"
        },
        "0": {
          h: "群聊",
          k: "暂无群聊"
        },
        "1": {
          h: "手机联系人",
          k: "暂无认识的人"
        },
        "2": {
          h: "星标朋友",
          k: "暂无星标朋友"
        },
        "3": {
          h: "我的朋友",
          k: "暂无朋友"
        }
      }
      if (props?.params?.groupId) return Reflect.get(types, '0')
      if (props?.params?.userId) return Reflect.get(types, '3')
      return Reflect.get(types, props?.params)
    })


    const applyData = computed(() => {
      if (props?.params === '-2') return store.state.applyData?.friendApply
      if (props?.params === '-1') return store.state.applyData?.groupApply
      return []
    })
    return {
      text,
      applyData
    }
  }
})
</script>

<style scoped lang="less">
.title {
  font-size: 16px;

  font-weight: 500;
  color: #242424;
  padding-left: 20px;
}

.applyMain {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;

  .noSelect {
    font-size: 16px;

    font-weight: 500;
    color: rgba(161, 161, 161, 0.7);
    letter-spacing: 2px;
  }

  .applyList {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px 0;

    &::-webkit-scrollbar {
      width: 5px;
      border-radius: 30px;
      display: none;
    }

    &::-webkit-scrollbar-thumb {
      height: 5px;
      width: 5px;
      background: rgba(161, 161, 161, 0.7);
    }
  }
}
</style>
